<template>
  <div class="tab">
    <tab-icon
    v-for="(item, index) in tabData"
    :index="index"
    :iconText="item.iconText"
    :path="item.path"
    >{{ item.tabText }}</tab-icon>
  </div>
</template>

<script>
import TabIcon from "@/conponents/TabBar/Icon.vue";
import tabData from "@/data/tab";
import { ref } from "@vue/reactivity";

export default {
  components: {
    TabIcon,
  },
  setup() {
    return {
      tabData: ref(tabData),
    };
  },
};

</script>

<style lang="less" scoped>
.tab{
    display: flex;  //弹性布局
    justify-content: space-around;  //平均分配，水平
    align-items: center;
    position: fixed; 
    bottom: 0;
    left: 0;
    z-index: 99; //优先级
    width: 100%;
    height: .44rem;
    border-top: 1px solid #ddd;
    background: white;
}
</style>
